<template>
  <a-modal :width="1000" title="选择供货商" zIndex="9999" v-model="visible" :destroyOnClose="true" :footer="null">
    <a-form layout="inline">
      <a-row :gutter="24" style="margin-bottom: 10px">
        <a-col :md="8" :sm="24">
          <a-form-item label="供货商名称">
            <a-input allowClear placeholder="请输入供货商名称" v-model="queryParam.name" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="手机号码">
            <a-input allowClear placeholder="请输入手机号" v-model="queryParam.tel" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="24">
          <a-form-item label="">
            <a-button type="primary" @click="getList()">查询</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-table
      :row-key="(record) => record.id"
      :columns="manager"
      :data-source="list"
      :pagination="{
        current: pageNo,
        total: this.total,
        pageSize: this.pageSize,
        showSizeChanger: false,
        onChange: tablePageChange,
      }"
    >
      <span slot="baseinfo" slot-scope="text, record">
        <div v-if="record.supplier_info">
          <a-avatar shape="square" :size="48" icon="user" :src="record.supplier_info.logo || ''" />
          <span style="margin-left: 10px" :length="20" tooltip>{{ record.supplier_name }}</span>
        </div>
      </span>
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { address } from '@/api/components/address'
import { supplierList } from '@/api/purchase/purchase'
import { STable } from '@/components'

const manager = [
  {
    title: 'ID',
    dataIndex: 'supplier_info.id',
    width: 100,
  },
  {
    title: '供货商信息',
    scopedSlots: { customRender: 'baseinfo' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 100,
  },
]
export default {
  components: {
    STable,
  },

  props: {
    params: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  data() {
    return {
      visible: false,
      queryParam: {
        name: '',
        tel: '',
      },
      manager,
      // 选择用户数据加载
      list: [],

      addressList: [],

      total: 0,
      pageNo: 1,
      pageSize: 10,
    }
  },
  created() {
    address().then((res) => {
      this.addressList = res.data.list
    })
    this.getList()
  },
  computed: {},

  methods: {
    tablePageChange(e) {
      this.getList(e)
    },
    // 获取数据列表
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { queryParam, pageSize } = this

      const res = await supplierList({
        page: pageNo,
        size: pageSize,
        ...queryParam,
        ...this.params,
      })

      if (res.code == 0) {
        this.pageNo = pageNo
        let { count: totalCount, list: data } = res.data
        this.total = totalCount
        this.list = data
      }

      hide()
    },

    onSelect(e) {
      this.visible = false
      this.$emit('select', e)
    },
  },
}
</script>
<style lang="less" scoped></style>
